<template>
  <div class='my-error'>
      <div class="img" :class="current === 'error_404'?'not-found':''">
          <img :src="current === 'error_404'?notFoundImg : errorImg" alt="">
      </div>
      <h3 class="title">{{title}}</h3>
  </div>
</template>
<style lang='less' scoped>
    .@{css-prefix}-error {
        padding-top: 160px;
        max-width: 1200px;
        margin: 0 auto;
        .title {
            font-size: 18px;
            color: @c-666;
            margin-top: 25px;
            text-align: center;
        }
        .img {
            width: 586px;
            margin: 0 auto;
            img {
                width: 100%;
            }
            &.not-found {
                width: 470px;
            }
        }
    }
</style>
<script>
export default {
    components: {},
    props: {},
    data () {
        return {
            title: '哎呀，服务器出了点小问题~',
            current: 'error_404',
            notFoundImg: require('@/assets/img/404.png'),
            errorImg: require('@/assets/img/500.png')
        }
    },
    created () {
        this.getErrorMsg()
    },
    methods: {
        getErrorMsg () {
            this.title = this.$route.meta.title
            this.current = this.$route.name
        }
    }
}
</script>
